<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <dt>后盾人</dt>
    <dd>1</dd>
    <dt>hdcms</dt>
    <dd hidden="hidden">2</dd>
    <h3>Cathaypacific.com</h3>
  </body>
</html>

<script>
  /*
  function panel(i) {
    let dds = document.querySelectorAll("dd");
    dds.forEach((dd) => dd.setAttribute("hidden", "hidden"));
    dds[i].removeAttribute("hidden");
  }

  document.querySelectorAll("dt").forEach((dt, i) => {
    dt.addEventListener("click", () => panel.call(null, i));
  });

  // bind 改变click事件回调函数中的this
  document.querySelector("button").addEventListener(
    "click",
    function () {
      console.log(`${this.url} + LOL😂`);
    }.bind({ url: "https://www.naodu.com" })
  );*/

  function Color(params) {
    this.elem = params;

    this.colors = ["#1abc9c", "#f1c40f", "#9b59b6", "#f39c12"];
    this.run = function () {
      setInterval(
        function () {
          let i = Math.floor(Math.random() * this.colors.length);
          this.elem.style.backgroundColor = this.colors[i];
        }.bind(this),
        1000
      );
    };
  }

  let h1 = new Color(document.querySelector("h3"));
  h1.run();
</script>
